<template>
  <div class="dashboard-container">
   <div class="container">
    <div class="tableBar">
      <label style="margin-right: 5px;">员工姓名:</label>
      <el-input v-model="name"  placeholder="请输入员工姓名" style="width: 15%" />
      <el-button type="primary" style="margin-left: 15px;">查询</el-button>
      <el-button type="primary" style="float: right" @click="handleAddEmp">+添加员工</el-button>
    </div>
    
    <el-table :data="records" stripe style="width: 100%">
      <el-table-column prop="name" label="员工姓名" width="180"></el-table-column>
      <el-table-column prop="username" label="账号" width="180"></el-table-column>
      <el-table-column prop="phone" label="手机号" ></el-table-column>

      <el-table-column prop="status" label="状态">
        <template slot-scope="scope">
           <div>
               {{ scope.row.status === 0 ? '禁用' : '启用' }}
           </div>
        </template>
      </el-table-column>

      <el-table-column prop="updateTime" label="最后操作时间"></el-table-column>

      <el-table-column prop="status" label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="handleUpdateEmp(scope.row )">修改</el-button>
          <el-button type="text" @click="handleStartOrStop(scope.row)">{{ scope.row.status === 0 ? '禁用' : '启用' }}</el-button>
        </template>
      </el-table-column>

    </el-table>

    <el-pagination
      class="pageList"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>

   </div>
  </div>
</template>






<script lang="ts">
import {getEmployeeList,queryEmployeeById,enableOrDisableEmployee} from '@/api/employee'




export default  {
//模型数据
   data(){
    return{
      name: '',
      page: 1,
      pageSize: 10,
      total: 0,
      records: []
    }
 },
 created(){ 
    this.pageQuery()
 },
  methods:{
     pageQuery(){
      //准备请求参数
      const params={page: this.page,pageSize: this.pageSize,name: this.input?this.input : undefined}
      //发送ajax请求
     getEmployeeList(params).then(res=>{
       if(res.data.code===1){
        this.total=res.data.data.total
        this.records=res.data.data.records
       }
     }).catch(err=>{
         this.$message.console.error('请求出错了：'+err.message);

     })
   },
   //pageSize发生变化时触发
   handleSizeChange(pageSize){
    this.pageSize=pageSize
    this.pageQuery()
   },
   //page发生变化时触发
   handleCurrentChange(page){
     this.page=page
     this.pageQuery()
   },
   //添加员工跳转页面
   handleAddEmp(){
      this.$router.push('/employee/add')
    },
   //启用禁用账号
   handleStartOrStop(row){
     //alert(`id=${row.id} status=${row.status}`)
     if(row.username==='admin'){
      this.$message.success('管理员账户不能修改!')
      return
     }

     //弹出一个确认框
     this.$confirm('确定要修改员工的账号状态吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(()=>{
                const p={
              id: row.id,
              status: !row.status ? 1:0  
          }
          enableOrDisableEmployee(p).then(res=>{
            if(res.data.code===1){
              this.$message.success('员工状态修改成功！')
              this.pageQuery()
            }
          }).catch(err=>{
            this.$message.console.error('修改失败了：'+err.message);
          })
        })
   },
   //跳转到修改员工页面,和增加页面一样
   handleUpdateEmp(row){
    //系统管理员不能修改
    if(row.username === 'admin'){
      this.$message.error('系统管理员不允许被修改')
      return
    }
    this.$router.push({
      //跳转到修改页面，通过url地址栏传递参数
      path: '/employee/add',
      query: {id: row.id}
    })
   }
  }
}
</script>

<style lang="scss" scoped>
.disabled-text {
  color: #bac0cd !important;
}
</style>
